<template>
	<el-drawer
		class="drawer"
		v-model="model"
		direction="btt"
		:show-close="false"
		size="50%"
		header-class="issue-mobile-template-header"
		body-class="issue-mobile-template-body"
		:resizable="true"
		:style="{
			padding: '26px 30px',
			borderTopRightRadius: '10px',
			borderTopLeftRadius: '10px',
		}"
	>
		<template #header>
			<div class="drawer-header">
				<span>更新时间</span>
				<img src="@/assets/svgs/mobile_close.svg" alt="关闭" @click="hanlderClose" />
			</div>
		</template>
		<template #default>
			<div class="drawer-content layout">
				<div class="drawer-content-left layout-left">
					<span>更新时间：</span>
				</div>
				<div class="drawer-content-right layout-right">
					<span v-for="item in timeObject.updateTime" :key="item">{{ item }}</span>
				</div>
			</div>
		</template>
		<template #footer>
			<div class="drawer-footer layout">
				<div class="drawer-footer-left layout-left">
					<span>上传时间：</span>
				</div>
				<div class="drawer-footer-right layout-right">
					<span v-for="item in timeObject.uploadTime" :key="item">{{ item }}</span>
				</div>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	// const isShow = ref(true);
	defineProps({
		timeObject: {
			type: Object,
			default: () => ({
				updateTime: [
					'2023-11-11 11:11:11',
					'2023-11-11 11:11:11',
					'2023-11-11 11:11:11',
					'2023-11-11 11:11:11',
					'2023-11-11 11:11:11',
					'2023-11-11 11:11:11',
				],
				uploadTime: ['2023-11-11 11:11:11'],
			}),
		},
	});
	const model = defineModel();
	const emits = defineEmits(['update:close']);
	function hanlderClose() {
		emits('update:close');
	}
</script>
<style lang="scss">
	$padding: 30px;
	.drawer {
		.drawer-header {
			@include flex(_, space-between);
			border-bottom: 1px solid #cecece;
			padding-bottom: $padding;
			span {
				@include font(_, 28px, _, 700, _);
			}
			img {
				width: 40px;
				height: 40px;
			}
			margin-bottom: 0;
		}
		.drawer-content {
			.drawer-content-left {
				@include font(_, 28px, 34px, 400, var(--issue-text-mobile-category-gray-color));
			}
			.drawer-content-right {
				@include font(_, 28px, 34px, 400, var(--issue-text-mobile-category-color));
				row-gap: 40px;
			}
		}
		.drawer-footer {
			border-top: 1px solid #cecece;
			padding-top: $padding;
			.drawer-footer-left {
				@include font(_, 28px, 34px, 400, var(--issue-text-mobile-category-gray-color));
			}
			.drawer-footer-right {
				@include font(_, 28px, 34px, 400, var(--issue-text-mobile-category-color));
			}
		}
		&:deep(.el-drawer__header) {
			margin: 0;
		}
	}
	.layout {
		@include flex(_, space-between);
		.layout-left,
		.layout-right {
			flex: 1;
		}
		.layout-left {
			@include flex(_, flex-start, flex-start);
			align-self: flex-start;
		}
		.layout-right {
			@include flex(column, flex-start, flex-end);
		}
	}
</style>
<style>
	.issue-mobile-template-header {
		margin: 0 !important;
	}
	.issue-mobile-template-body {
		padding-top: 30px !important;
	}
</style>
